<template>
  <div class="ui-unfold" ref="dom">
    <div class="text-box" :style="{ lineHeight: lineHeight + 'px' }">
      {{ text }}
      <span class="expand" v-if="foldable" @click="handleClick">
        <img
            v-if="folded"
          :height="lineHeight"
          src="@/assets/img/gradient.png"
          alt="渐变"
          class="gradient"
        /><span class="click-unfold"> {{ folded ? "展开" : "收起" }}</span>
      </span>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
export default {
  name: "ui-unfold",
  data() {
    this.limitHeight = this.line * this.lineHeight;
    return {
      foldable: false, // 是否显示展开收起tip
      folded: false // 展开收起状态
    };
  },
  props: {
    text: {
      type: String|Number,
      default: ""
    },
    lineHeight: {
      type: Number|String,
      default: 19
    },
    line: {
      type: String|Number,
      default: 4
    }
  },
  mounted() {
    this.dom = this.$refs.dom;
    this.autoHeight = $(this.dom).height();
    if (this.autoHeight > this.limitHeight) {
      this.foldable = true;
      this.folded = true;
      $(this.dom).height(this.limitHeight);
    }
  },
  methods: {
    handleClick(e) {
      e.stopPropagation();
      e.preventDefault();
      this.folded = !this.folded;
      if (this.folded && this.dom) {
        $(this.dom).animate({
          height: this.limitHeight + "px"
        });
      } else {
        $(this.dom).animate({
          height: this.autoHeight + "px"
        });
      }
    }
  }
};
</script>
<style lang="css">
.ui-unfold {
  display: inline-block;
  overflow: hidden;
  width: 100%;
  position: relative;
}
.text-box {
  width:8.8;
  padding-right:.346667rem;
  box-sizing: border-box;
}
.expand {
  /* background: white; */
  position: absolute;
  bottom: 0px;
  right: 0px;
  margin-left: 0.4rem;
  cursor: pointer;
}
.click-unfold {
  background: white;
  color: #fd7f2c;
}
.gradient {
  vertical-align: bottom;
}
</style>
